<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋信息查看</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <link href="../../res/echarts/eleTree.css" rel="stylesheet"/>
    <script src="../../res/echarts/eleTree.js"></script>
    <script src="../../res/js/login_common.js" charset="utf-8"></script>
    <style type="text/css">
        body {
            padding: 10px;
        }

        .fonts {
            line-height: 40px;
        }

        .deletes {
            width: 60px;
            height: 40px;
            /*border:1px solid;*/
            float: right;
            color: #0aafe6;
        }

        .deletes:hover {
            cursor: pointer;
            color: #bd2c00
        }
    </style>

</head>
<body>

<input type="hidden" id="houseId" name="houseId">
<div class="layui-form-item">

    <div class="layui-inline">
        <label class="layui-form-label">编号：</label>
        <div class="layui-input-inline">
            <div class="fonts" id="userId">

            </div>
            <!--<input type="text" name="userId" id="userId" lay-verify="required" placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">房源地址：</label>
        <div class="layui-input-inline">
            <div class="fonts" id="userName">

            </div>
            <!--<input type="text" name="userName" id="userName" lay-verify="required" placeholder="请输入房源地址（必填）"
                   autocomplete="off" class="layui-input">-->
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">区域名称：</label>
        <div class="layui-input-inline">
            <div class="fonts" id="sectorName">

            </div>
            <!--<input type="text" name="sectorName" id="sectorName" placeholder="请输入区域名称" autocomplete="off"
                   class="layui-input">-->
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">录入人电话</label>
        <div class="layui-input-inline">
            <div class="fonts" id="createdPhone">

            </div>
            <!--<input type="text" name="houseArea" id="houseArea" lay-verify="required" placeholder="㎡（必填）"
                   autocomplete="off"
                   class="layui-input">-->
        </div>
    </div>
</div>


<div class="layui-form-item">

    <div class="layui-inline">
        <label class="layui-form-label">房屋面积：</label>
        <div class="layui-input-inline">
            <div class="fonts" id="houseArea">

            </div>
            <!--<input type="text" name="houseArea" id="houseArea" lay-verify="required" placeholder="㎡（必填）"
                   autocomplete="off"
                   class="layui-input">-->
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">录入人：</label>
        <div class="layui-input-inline">
            <div class="fonts" id="createdBy">

            </div>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">房东电话：</label>
        <div class="layui-input-inline">
            <div class="fonts" id="housePhone">

            </div>
            <a class="layui-btn layui-btn-xs layui-btn-normal" id="showPhone">查看</a>
            <!--<input type="tel" name="housePhone" id="housePhone" lay-verify="required|phone" placeholder="清输入手机（必填）"
                   autocomplete="off"
                   class="layui-input">-->
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">房屋价格：</label>
        <div class="layui-input-inline" style="width: 100px;">
            <div class="fonts" id="housePrice">

            </div>
            <!--<input type="text" name="housePrice" id="housePrice" lay-verify="required" placeholder="￥（必填）"
                   autocomplete="off"
                   class="layui-input">-->
        </div>
    </div>
</div>

<div class="layui-form-item">



</div>
<div>
    <!--<div>
        <div>
            <a class="layui-btn layui-btn-danger">删除</a>
        </div>
        <img src="../../res/images/20200618213725.png"/>
        <input name="file" type="hidden"/>
    </div>-->
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="imgs">图片上传</button>
    </div>
    <fieldset class="layui-elem-field">
        <legend>房源图片</legend>

    <div id="houseImg">
        <!--<div style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px">
            <a href="javascript:deleteImg(0)">
                <span class="layui-badge">X</span>
            </a>
            <a href="javascript:deleteImg(0)">
                <div style="margin-top: -18px;height: 200px;width:200px;background-image: url('../../res/images/20200618213725.png');background-size:100% 100%;">

                </div>
            </a>
        </div>
        <div style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px">
            <a href="javascript:deleteImg(0)">
                <span class="layui-badge">X</span>
            </a>
            <a href="javascript:deleteImg(0)">
                <div style="margin-top: -18px;height: 300px;width:300px;background-image: url('../../res/images/20200618213725.png');background-size:100% 100%;">

                </div>
            </a>
        </div>-->
        <!--<div>

        </div>
        <img src="../../res/images/20200618213725.png"/>
        <input name="file" type="hidden"/>
        <hr>-->
    </div>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-mid">备注：</label>
        <div class="layui-input-block" >
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="houseParticular">

            </div>
        </div>
    </div>
</div>
<form class="layui-form layui-form-pane" action="">
    <input type="hidden" name="sectorId" id="houseIds"><!-- 房源id-->
    <input type="hidden" name="streetName" id="streetName" value="1"><!-- 1为房源，0为客户-->
    <!--<div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详细信息</label>
        <div class="layui-input-block">
            <textarea id="sectorNames" name="sectorName" lay-verify="conten" style="display: none;"></textarea>
        </div>
    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">详细信息:</label>
        <div class="layui-input-block">
            <input id="sectorNames" lay-verify="required" name="sectorName" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</button>
        </div>
    </div>
</form>

<hr>

<!--
    a：hover{

    cursor:pointer
width:60px;height:40px;border:1px solid;
    }-->

<div id="TenementStreet">
    <!--<div style="font-size: 30px;margin-left: 100px">
        <div style="float: right;color: #0aafe6;:hover{cursor:pointer;color: #bd2c00}" onclick="deleteStreet()">删除</div>
        <div>用户名称</div>
        <div style="font-size: 25px;margin-top: 10px">内容</div>
        <div style="float: right;">2020-06-17</div>
        <hr>
    </div>-->
</div>

<script>

    // 修改赋值
    var houseId = getQueryString("houseId");
    var showPhone;
    layui.use(['form', 'layedit', 'laydate', 'layer', 'upload', 'flow'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload
            , flow = layui.flow;

        //设置文本域
        //layedit = layui.layedit, $ = layui.jquery;
        /*var index = layedit.build('sectorNames', {
            tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link', 'unlink', 'face'],//设置需要的控件
            height: 260 //设置高度
        });*/

        flow.lazyimg({
            elem: '#LAY_demo3 img'
            , scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
        });

        //查询关联图片
        var url = "../../houseAction/selectImg";
        var data = {imgType: 0, houseId: houseId};
        $.post(url, data, function (obj) {
            $("#houseImg").html("");
            $.each(obj, function (index, item) {
                $("#houseImg").append('<div id="'+item.imgId+'" style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px"> <a href="javascript:deleteImg(\''+item.imgId+'\')"><span class="layui-badge">X</span></a><a href="javascript:imgShow(\''+item.imgUrl+'\')"><div style="margin-top: -18px;height: 200px;width:200px;background-image: url(\''+item.imgUrl+'\');background-size:100% 100%;"></div></a></div>');
            })
        }, "json");

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#imgs'
            , url: '../../clientAction/uploadNew' //改成您自己的上传接口
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                var url = "../../houseAction/addImg";
                var data = {imgUrl: res.data.src, houseId: houseId};
                $.post(url, data, function (objs) {
                    if (objs > 0) {
                        //查询关联图片
                        var url = "../../houseAction/selectImg";
                        var data = {imgType: 0, houseId: houseId};
                        $.post(url, data, function (obj) {
                            $("#houseImg").html("");
                            $.each(obj, function (index, item) {
                                $("#houseImg").append('<div id="'+item.imgId+'" style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px"> <a href="javascript:deleteImg(\''+item.imgId+'\')"><span class="layui-badge">X</span></a><a href="javascript:imgShow(\''+item.imgUrl+'\')"><div style="margin-top: -18px;height: 200px;width:200px;background-image: url(\''+item.imgUrl+'\');background-size:100% 100%;"></div></a></div>');
                            })
                        }, "json");
                    } else {
                        //演示失败状态，并实现重传
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }

                }, "json");

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        /* //加载组件
         layui.config({
             base: '../../res/echarts/'
         }).extend({
             xmSelect: 'xm-select'
         }).use(['xmSelect'], function () {
             var xmSelect = layui.xmSelect;
             var url = "../../houseOrClientAction/selectClientAll";
             var clientData = {};
             if (houseId) {
                 clientData = {"id": houseId};
             }

             $.post(url, clientData, function (obj) {
                 //渲染多选
                 clients = xmSelect.render({
                     el: '#clients',
                     data: obj
                 })
             }, "json")


         });*/


        var url = "../../streetAction/findAll";

        $.post(url, {sectorId: houseId, streetName: "1"}, function (obj) {
            $("#TenementStreet").html("");
            $.each(obj, function (index, item) {
                console.info(window.loginObj.manager.userType)
                if (window.loginObj.manager.userType == 2) {
                    $("#TenementStreet").append('<div style="font-size: 20px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 15px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;font-size: 20px">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                } else {
                    $("#TenementStreet").append('<div style="font-size: 20px;margin-left: 100px;margin-right: 50px"><div class="deletes" onclick="deleteStreet(\'' + item.streetId + '\')">删除</div><div>' + item.userName + '</div><div style="font-size: 15px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;font-size: 20px">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                }
            })
        }, "json");

        //监听提交
        form.on('submit(demo1)', function (data) {
            var url = "../../streetAction/addOrUpdate";
            /*var selectArr = clients.getValue();
            var clientId = [];
            $.each(selectArr, function (index, item) {
                clientId.push(item.value + "_" + item.name);
            });
            data.field.clientId = clientId;
            console.info(data.field);*/
            $.post(url, data.field, function (obj) {
                if (obj.num == 1) {
                    //window.parent.location.reload();//刷新父页面
                    //window.location.reload();//刷新页面
                    // var index = layer.getFrameIndex(window.name); //获取窗口索引
                    // layer.close(index);
                    layer.msg("新增成功", {icon: 1});
                    $("#sectorNames").val("");
                    var url = "../../streetAction/findAll";

                    $.post(url, {sectorId: houseId, streetName: "1"}, function (obj) {
                        $("#TenementStreet").html("");
                        $.each(obj, function (index, item) {
                            console.info(window.loginObj.manager.userType)
                            if (window.loginObj.manager.userType == 2) {
                                $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                            } else {
                                $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div class="deletes" onclick="deleteStreet(\'' + item.streetId + '\')">删除</div><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                            }
                        })
                    }, "json");

                } else {
                    layer.msg("新增失败", {icon: 2});
                }
            }, "json");
            return false;
        });


        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

        if (houseId) {
            $("#houseIds").val(houseId);
            var url = "../../houseAction/findById";
            var data = {"houseId": houseId};
            $.post(url, data, function (obj) {
                $("#userName").html(obj.userName);             // 房源地址
                $("#userId").html(obj.userId);                   // 编号
                $("#housePrice").html(obj.housePrice);           // 房屋价格
                showPhone=obj.housePhone;
                $("#housePhone").html(obj.housePhone);           // 联系电话
                $("#housePhone").html(clientPhones(obj.housePhone)); //房东电话
                $("#createdBy").html(obj.createdBy);                //创建人
                $("#createdPhone").html('<a href="tel://' + obj.createdPhone + '" style="color: #00aeff">' + obj.createdPhone + '</a>');
                $("#sectorName").html(obj.sectorName);               // 区域名称
                $("#houseParticular").html(obj.houseParticular);
                $("#houseArea").html(obj.houseArea);             // 面积
                //layedit.setContent(index, obj.houseParticular);     // 备注
                form.render();
            }, "json")
            //查询关联图片
            /*var url = "../../houseAction/selectImg";
            var data = {imgType: 0, houseId: houseId};
            $.post(url, data, function (obj) {
                $.each(obj, function (index, item) {
                    $("#houseImg").append('<img src="' + item.imgUrl + '" />');
                })
            }, "json");*/
        }

        $("#showPhone").on("click",function () {

            var url="../../streetAction/addOrUpdate";
            var data={streetName:1,sectorId:houseId,sectorName:"查看电话"};
            $.post(url,data,function (obj) {
                if(obj.num>0){
                    $("#housePhone").html('<a href="tel://'+showPhone+'" style="color: #00aeff">'+showPhone+'</a>');

                    var url = "../../streetAction/findAll";
                    $.post(url, {sectorId: houseId, streetName: "1"}, function (obj) {
                        $("#TenementStreet").html("");
                        $.each(obj, function (index, item) {
                            console.info(window.loginObj.manager.userType)
                            if (window.loginObj.manager.userType == 2) {
                                $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                            } else {
                                $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div class="deletes" onclick="deleteStreet(\'' + item.streetId + '\')">删除</div><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                            }
                        })
                    }, "json");
                }

            },"json");
        })


        /*form.verify({
            conten: function (value) {
                return layedit.sync(index);
            }
        });*/
        form.render();
    });
</script>

<script type="text/javascript">

    function imgShow(url) {
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['1080px', '90%'], //宽高
            content:'<img src="'+url+'" width="1080px" />'
        });
        /*layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<div><img src="\'+url+\'" width="800px" height="800px" /></div>'
        });*/
    }

    function deleteImg(imgId) {
        //询问框

        layer.confirm('是否删除', {
            icon: 0,
            btn: ['是','否'] //按钮
        }, function(){
            var url="../../houseAction/deleteImg";
            var data={imgId:imgId};
            $.post(url,data,function (obj) {
                if(obj>0){
                    $("#"+imgId+"").remove();
                    layer.msg('删除成功', {icon: 1});
                }else{
                    layer.msg("删除失败", {icon: 2});
                }
            },"json");
        }, function(){

        });

    }

    function clientPhones(clientPhone) {
        var phone=clientPhone.substr(0,3);
        var backphone=clientPhone.substr(7,4);
        return phone+"****"+backphone;
    }

    function deleteStreet(streetId) {
        //询问框
        layer.confirm('是否删除', {
            btn: ['是', '否'] //按钮
        }, function () {
            var url = "../../streetAction/deleteById";
            $.post(url, {id: streetId}, function (obj) {
                if (obj.num == 1) {

                    layer.msg("删除成功", {icon: 1});
                } else {
                    layer.msg("删除失败", {icon: 2});
                }

                var url = "../../streetAction/findAll";

                $.post(url, {sectorId: houseId, streetName: "1"}, function (obj) {
                    $("#TenementStreet").html("");
                    $.each(obj, function (index, item) {
                        console.info(window.loginObj.manager.userType)
                        if (window.loginObj.manager.userType == 2) {
                            $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                        } else {
                            $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div class="deletes" onclick="deleteStreet(\'' + item.streetId + '\')">删除</div><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                        }
                    })
                }, "json");
            }, "json")
        }, function () {

        });

    }

    /**
     * 修改日历格式
     * @param dates
     * @returns {string}
     */
    function setDate(dates) {
        var date = new Date(dates);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var sdate = date.getFullYear() + "-"
        if (month < 10) {
            sdate += "0" + month + "-";
        } else {
            sdate += month + "-";
        }
        if (day < 10) {
            sdate += "0" + day;
        } else {
            sdate += day;
        }
        return sdate;
    }
</script>
</body>
</html>